<template>
    <el-container>


        <el-header>
            <layoutHeader />
        </el-header>
        
        <el-main>
        <latoutmain />
        </el-main>

        <el-footer>
            <layoutFooter />
        </el-footer>
    </el-container>
</template>

<script setup lang="ts">
import latoutmain from './components/index.vue'
// import layoutFooter from "./components/layoutFooter.vue";
import layoutHeader from "./components/layoutHeader.vue";
// 观看视频的这几个组件不显示 ，再watchRoom文件夹里  index.vue包含了 header main foot
// compoents里面 

</script>
<style scoped>
/* Use flexbox to center the div-video element horizontally and vertically */
/* 将#div-video元素设置为flex布局，使其内部元素在水平和垂直方向上都居中 */


.el-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    
}

.el-main {
 
    display: flex;
align-self: center;

    width: 85%;
    padding: 0;
    border-radius: 10px;
    overflow: unset;
    

}

.el-header {
    height: 68px;
    /* // background-color: rgb(208, 14, 24); */
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
}


</style>